<template>
    <div>
      <el-row>
        <el-col>
          <div>
            <div class="leftbox">
              <el-button type="success" @click="addNew">添加新区域</el-button>        
              <el-radio-group v-model="radio" @input="conditionSearch">
                <el-radio-button label="全部"></el-radio-button>
                <el-radio-button label="启用"></el-radio-button>
                <el-radio-button label="禁用"></el-radio-button>
              </el-radio-group>
            </div>
            <div class="rightbox">
              <el-input v-model="keyword" placeholder="请输入关键字查询" style="width: 180px;"></el-input>
              <el-button type="primary" @click="keywordSearch">查询</el-button>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <template>
            <el-table
              :data="areaList"
              tooltip-effect="dark"
              style="width: 100%"
            >
              <el-table-column type="index" :index="indexMethod">
              </el-table-column>
              <el-table-column prop="area" label="区域"> </el-table-column>
              <el-table-column label="状态">
                <template slot-scope="scope">
                  <span v-if="scope.row.state == 1" style="color: green;">启用中</span>
                  <span v-else-if="scope.row.state == 2" style="color: red;">禁用中</span>
                </template>
              </el-table-column>         
              <el-table-column prop="addTime" label="添加时间" :formatter="formatData"> </el-table-column>
              <el-table-column prop="description" label="描述"> </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button @click="detail(scope)" type="success">详情</el-button>
                  <el-button type="danger" @click="change(scope)">编辑</el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-col>
      </el-row>
      <el-row>
          <el-col :span="8" :offset="9">
              <div class="block">
                  <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="current"
                  :page-sizes="[5, 10, 20, 50]"
                  :page-size="size"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total">
                  </el-pagination>
              </div>
          </el-col>
      </el-row>
      <el-drawer
        title="编辑信息"
        :visible.sync="dialog"
        direction="ltr"
        custom-class="demo-drawer"
        ref="drawer"
      >
        <div class="demo-drawer__content">
          <el-form :model="baseArea">
            <el-form-item label="描述" :label-width="formLabelWidth">
              <el-input v-model="baseArea.description" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="是否禁用" :label-width="formLabelWidth">
              <el-button v-if="baseArea.state == 1" type="danger" @click="notUseIt">禁用</el-button>
              <el-button v-else type="success" @click="useIt">启用</el-button>
            </el-form-item>
          </el-form>
          <div class="demo-drawer__footer">
            <el-button @click="cancelForm">取 消</el-button>
            <el-button
              type="primary"
              @click="handleChange"
              >确定</el-button
            >
          </div>
        </div>
      </el-drawer>
      <el-dialog title="新增信息" :visible.sync="dialogFormVisible">
        <el-form :model="baseArea">
          <el-form-item label="区域名" :label-width="formLabelWidth">
            <el-input v-model="baseArea.area" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="状态" :label-width="formLabelWidth">
            <el-select v-model="baseArea.state" placeholder="请选择初始状态">
              <el-option label="启用" value="1"></el-option>
              <el-option label="禁用" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="描述" :label-width="formLabelWidth">
            <el-input v-model="baseArea.description" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancleAdd">取 消</el-button>
          <el-button type="primary" @click="sureAdd">确 定</el-button>
        </div>
      </el-dialog>
      <el-dialog title="修改记录" :visible.sync="dialogTableVisible">
        <el-table :data="details">
          <el-table-column property="area" label="区域名"></el-table-column>
          <el-table-column property="description" label="描述"></el-table-column>
          <el-table-column label="状态">
            <template slot-scope="scope">
              <span v-if="scope.row.state == 1">启用</span>
              <span v-else-if="scope.row.state == 2">禁用</span>
            </template>
          </el-table-column>
          <el-table-column property="updateTime" label="修改时间" :formatter="formatData"></el-table-column>
          <el-table-column property="updatePerson" label="修改人"></el-table-column>
        </el-table>
      </el-dialog>
      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%"
        >
        <span>您已添加新地区，是否前往添加相关产线信息？</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">稍后再去</el-button>
          <el-button type="primary" @click="goProduter">现在去</el-button>
        </span>
      </el-dialog>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        areaList: [],
        baseArea: {},
        details: [],
        dialog: false,
        formLabelWidth: '80px',
        current: 1,
        size: 10,
        total: 0,
        dialogFormVisible: false,
        dialogTableVisible: false,
        radio: "全部",
        keyword: '',
        dialogVisible: false,
      };
    },
    mounted: function () {
      this.getList();
    },
    methods: {
      getList: function () {
        this.baseArea = {}
        this.$axios.get("/baseArea/all/" + this.current + "/" + this.size).then((res) => {
          this.areaList = res.data.data.records;
          this.total = res.data.data.total
        });
      },
      detail: function (scope) {
        this.$axios.get("/baseArea/detail?areaId=" + scope.row.id).then(res =>{
          this.details = res.data.data;
          this.dialogTableVisible = true;
        })
      },
      change: function (scope) {
          this.baseArea = {};
          this.baseArea = scope.row;
          this.dialog = true;
      },
      handleChange: function (scope) {
          this.$axios.put("/baseArea/change", this.baseArea).then(result =>{
            this.getList()
            this.baseArea = {}
            this.dialog = false;
          })
      },
      indexMethod(index) {
        return index + 1;
      },
      cancelForm() {
        this.baseArea = {}
        this.getList()
        this.dialog = false;
      },
      formatData(row, column, cellValue, index){
          var s =	new Date(cellValue).toLocaleString();
          return s;
      },
      handleSizeChange(val) {
              this.size = val
              this.getList()
      },
      handleCurrentChange(val) {
          this.current = val
          this.getList()
      },
      useIt(){
        this.baseArea.state = 1
      },
      notUseIt(){
        this.baseArea.state = 2
      },
      addNew(){
        this.dialogFormVisible = true;
      },
      cancleAdd(){
        this.baseArea = {}
        this.dialogFormVisible = false;
      },
      sureAdd(){
        this.$axios.post("/baseArea/add",this.baseArea).then(result => {
          this.getList()
          this.baseArea = {}
          this.dialogFormVisible = false;
          this.dialogVisible = true;
        })
      },
      conditionSearch(){
        this.keyword = ''
        if(this.radio == "启用"){
          this.baseArea = {}
          this.baseArea.state = 1
          this.current = 1
          this.size = 10
          this.$axios.post("/baseArea/conditionalSearch/" + this.current + "/" + this.size,this.baseArea).then(res => {
            this.areaList = res.data.data.records
            this.baseArea = {}
          })
        }else if(this.radio == "禁用"){
          this.baseArea = {}
          this.baseArea.state = 2
          this.current = 1
          this.size = 10
          this.$axios.post("/baseArea/conditionalSearch/" + this.current + "/" + this.size,this.baseArea).then(res => {
            this.areaList = res.data.data.records
            this.baseArea = {}
          })
        }else {
          this.getList()
        }
      },
      keywordSearch(){
        this.radio = '全部'
        this.current = 1
        this.size = 10
        this.$axios.get("/baseArea/keywordSearch/" + this.current + "/" + this.size + "?keyword=" + this.keyword).then(res => {
          this.areaList = res.data.data.records
        }) 
      },
      goProduter(){
        this.dialogVisible = false;
        this.$router.push("/producter");
      }
    },
  };
  </script>
  
  <style scoped>
  .leftbox {
    float: left;
  }
  .rightbox {
    float: right;
  }
  </style>